<template>
    <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <hr>
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span><br>
        <button @click="changeFullName">将全名改为li-si</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,reactive,toRefs,toRef,computed} from "vue"
    //数据
    let person=reactive({
        name:"xiaoyu",
        age:18
    })
    // let {name,age}=person;
    // console.log(name,age);//产生出普通的值！

    let {name,age}=toRefs(person);
    console.log(name,age);

    let name2=toRef(person,"name");
    console.log(name2);

    //方法
    function changeName(){
        person.name+="~"
    }
    function changeAge(){
        person.age+=1
    }

    // -----------------------------------
    let firstName=ref("张")
    let lastName=ref("三")
    //这么定义的计算属性只是可读的！
    // let fullName=computed(()=>{
    //     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1)+"-"+lastName.value;
    // })

    //定义一个计算属性，是可读可写的！
    let fullName =computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1)+"-"+lastName.value; 
        },
        set(val){
            const [str1,str2]=val.split("-");
            firstName.value=str1
            lastName.value=str2 
        }
    })

    console.log(fullName);//也是 一个ref类型
    

    function changeFullName(){
        fullName.value="li-si"
    }



</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li{
    font-size: 20px;
}
</style>